<template>
  <div class="hygiene-management">
    <!-- 页眉 -->
    <el-row class="page-header">
      <el-col :span="24" class="header-container">
        <div class="page-title">组织机构 - 卫生管理</div>
        <div class="user-actions">
          <el-button type="primary" icon="document" @click="openManagementDialog">管理规程</el-button>
          <el-button type="success" icon="plus" @click="openAddDialog">添加记录</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- Tab 页 -->
    <el-tabs v-model="activeTab" type="card" class="custom-tabs">
      <!-- 人员体检报告 Tab -->
      <el-tab-pane label="人员体检报告" name="health-report">
        <el-table :data="healthReports" border style="width: 100%">
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="project" label="体检项目" align="center" />
          <el-table-column prop="date" label="体检日期" align="center" />
          <el-table-column prop="report" label="体检报告" align="center" />
          <el-table-column prop="addDate" label="添加日期" align="center" />
          <el-table-column label="操作" align="center" width="150">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                icon="view"
                class="custom-button"
                @click="viewDetails(row, 'health-report')"
              />
              <el-button
                type="text"
                size="small"
                icon="edit"
                class="custom-button"
                @click="editRecord(row, 'health-report')"
              />
              <el-button
                type="text"
                size="small"
                icon="delete"
                class="custom-button"
                @click="deleteHealthReport(row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 生产用品清洁记录 Tab -->
      <el-tab-pane label="生产用品清洁记录" name="clean-records">
        <el-table :data="cleanRecords" border style="width: 100%">
          <el-table-column prop="item" label="生产用具" align="center" />
          <el-table-column prop="method" label="清洁方式" align="center" />
          <el-table-column prop="person" label="清洁人员" align="center" />
          <el-table-column prop="addDate" label="添加日期" align="center" />
          <el-table-column label="操作" align="center" width="150">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                icon="view"
                class="custom-button"
                @click="viewDetails(row, 'clean-records')"
              />
              <el-button
                type="text"
                size="small"
                icon="edit"
                class="custom-button"
                @click="editRecord(row, 'clean-records')"
              />
              <el-button
                type="text"
                size="small"
                icon="delete"
                class="custom-button"
                @click="deleteCleanRecord(row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加/编辑记录弹窗 -->
    <el-dialog v-model="dialogVisible" :title="isEditMode ? '编辑记录' : '添加记录'" width="50%">
      <el-form ref="addFormRef" :model="form" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="选择类型">
              <el-select v-model="selectedType" placeholder="请选择类型" @change="resetForm">
                <el-option label="体检报告" value="health-report" />
                <el-option label="清洁记录" value="clean-records" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 体检报告表单 -->
        <template v-if="selectedType === 'health-report'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-select v-model="form.name" placeholder="请选择姓名">
                  <el-option label="张某某" value="张某某" />
                  <el-option label="陈某某" value="陈某某" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="体检日期">
                <el-date-picker
                  v-model="form.date"
                  type="date"
                  placeholder="选择体检日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="体检项目">
                <el-input v-model="form.project" placeholder="请输入体检项目" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="体检报告">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                >
                  <el-button type="primary" icon="upload">上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <!-- 清洁记录表单 -->
        <template v-if="selectedType === 'clean-records'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="生产用具">
                <el-input v-model="form.item" placeholder="请输入生产用具" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="清洁方式">
                <el-input v-model="form.method" placeholder="请输入清洁方式" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="清洁人员">
                <el-input v-model="form.person" placeholder="请输入清洁人员" />
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </template>
    </el-dialog>

    <!-- 管理规程弹窗 -->
    <el-dialog v-model="managementDialogVisible" title="管理规程详细信息" width="40%">
      <el-descriptions title="管理规程" border>
        <el-descriptions-item label="文件类型">SMP</el-descriptions-item>
        <el-descriptions-item label="文件名称">卫生管理规程</el-descriptions-item>
        <el-descriptions-item label="文件编号">SMP-WSGL-001</el-descriptions-item>
        <el-descriptions-item label="添加日期">2024/11/15</el-descriptions-item>
        <el-descriptions-item label="备注">
          本文件用于规范卫生管理的操作流程，确保符合相关标准。
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="managementDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 查看详情弹窗 -->
    <el-dialog v-model="detailsDialogVisible" :title="detailsDialogTitle" width="40%">
      <el-descriptions title="记录详情" border>
        <template v-for="(value, key) in selectedRecord" :key="key">
          <el-descriptions-item :label="key">{{ value }}</el-descriptions-item>
        </template>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailsDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";

// 当前 Tab 页
const activeTab = ref("health-report");

// 人员体检报告数据
const healthReports = ref([
  {
    name: "张某某",
    project: "入职体检",
    date: "2024/11/01",
    report: "未上传",
    addDate: "2024/11/15",
  },
]);

// 生产用品清洁记录数据
const cleanRecords = ref([
  { item: "手推车", method: "压缩空气清洗", person: "张某某", addDate: "2024/11/15" },
]);

// 管理规程弹窗
const managementDialogVisible = ref(false);

// 查看详情弹窗
const detailsDialogVisible = ref(false);
const detailsDialogTitle = ref("记录详情");
const selectedRecord = ref({});

// 表单控制
const dialogVisible = ref(false);
const isEditMode = ref(false);
const selectedType = ref("health-report");
const form = reactive({
  name: "",
  project: "",
  date: "",
  item: "",
  method: "",
  person: "",
});

// 打开管理规程弹窗
const openManagementDialog = () => {
  managementDialogVisible.value = true;
};

// 查看记录详情
const viewDetails = (row: any, type: string) => {
  selectedRecord.value = row;
  detailsDialogTitle.value =
    type === "health-report" ? "体检报告详情" : "清洁记录详情";
  detailsDialogVisible.value = true;
};

// 编辑记录
const editRecord = (row: any, type: string) => {
  Object.assign(form, row);
  selectedType.value = type;
  isEditMode.value = true;
  dialogVisible.value = true;
};

// 删除记录
const deleteHealthReport = (row: any) => {
  ElMessageBox.confirm("确定要删除此记录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const index = healthReports.value.indexOf(row);
      healthReports.value.splice(index, 1);
      ElMessage.success("删除成功");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

const deleteCleanRecord = (row: any) => {
  ElMessageBox.confirm("确定要删除此记录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const index = cleanRecords.value.indexOf(row);
      cleanRecords.value.splice(index, 1);
      ElMessage.success("删除成功");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 保存记录
const handleSubmit = () => {
  if (selectedType.value === "health-report") {
    if (isEditMode.value) {
      const index = healthReports.value.findIndex((item) => item.name === form.name);
      healthReports.value[index] = { ...form, report: "已上传" };
    } else {
      healthReports.value.push({
        ...form,
        report: "未上传",
        addDate: new Date().toISOString().split("T")[0],
      });
    }
  } else if (selectedType.value === "clean-records") {
    if (isEditMode.value) {
      const index = cleanRecords.value.findIndex((item) => item.item === form.item);
      cleanRecords.value[index] = { ...form };
    } else {
      cleanRecords.value.push({
        ...form,
        addDate: new Date().toISOString().split("T")[0],
      });
    }
  }
  dialogVisible.value = false;
};

// 重置表单
const resetForm = () => {
  Object.keys(form).forEach((key) => (form[key] = ""));
};

// 打开添加记录弹窗
const openAddDialog = () => {
  isEditMode.value = false;
  resetForm();
  dialogVisible.value = true;
};
</script>

<style scoped>
.hygiene-management {
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #4caf50;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.custom-button {
  background-color: transparent;
  border: none;
  color: inherit;
}
</style>
